
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
    <title>${obj.title!}</title>
    <link rel="stylesheet" href="${root}css/seedsui.min.css">
</head>

<body ontouchstart="">
    <header>
        <div class="titlebar reverse">
            <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
            <h1 class="titlebar-title text-center">${obj.name!}</h1>
            <a class="titlebar-button" ><i class="icon "></i></a>
        </div>
        
    </header>
    <article style="padding-top:44px">
    <ul class="list">
        <li class="list-li underline">
                    <div class="list-thumbnail">
                        <img data-load-src="" src="${www}${obj.img!}" data-error-src="images/list-default.png">
                        
                    </div>
                    <div class="list-container">
                        <div class="list-title">
                            ${obj.name!}
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-phone color-primary"></i>
                            <p class="list-font">
                               	${obj.phone!}
                            </p>
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-computer color-primary"></i>
                            <p class="list-font">${obj.text!}</p>
                        </div>
                    </div>
                </li>
        </ul>
        <ul class="tabbar tabbar-line animated" data-col="3" id="ID-Tabbar">
            <li class="tab">
                <label class="tab-label">课程</label>
            </li>
            <li class="tab active">
                <label class="tab-label">推荐</label>
            </li>
            <li class="tab">
                <label class="tab-label">讲师</label>
            </li>
        </ul>
        <div class="slider-container" id="ID-Pages" style="height: 300px;">
        <div class="slider-wrapper">
        <div class="slider-slide">
            <!--:for(cate in cache.cates!){  -->
        <div class="sliver "  style="text-align: center;">
			
			<p class="sliver-title" style="color: #444;">${cate.name!}</p>
			<small  style="margin-right: 4px;">更多</small>
		</div>
        <ul class="grid app-grid-thumbnail" data-col="2">
        	<!--:for(c in cate.courses){  -->
			<li onclick="location.href='${root}course/${c.id}'" style="padding-top: 2px;">
				<a class="grid-icon">
					<img src="${www}${c.img!}" style="height: 100px;width: 100%;border-radius: 3px;">
					<!--:if(cLP.index==1){  -->
					<span class="tip" style="position:absolute;top:-4px;right:-4px;">新</span>
					<!--:}  -->
				</a>
				<label class="grid-label" style="color:#333333;margin-left:4px;text-align:left;">${c.title}</label>
				<!--:if(c.price>0){  -->
				<small style="color:#ff5656;margin-left:4px;float: left;">${c.price}</small>
				<!--:}else{  -->
				<small style="color:${c.vip>0?'#f4984e':'#16c447'};margin-left:4px;float: left;">${c.vip>0?'VIP视频':'免费'}</small>
				<!--:}  -->
				<small style="float: right;color: #14ba91;">${c.agency_name!}</small>
			</li>
			<!--:}  -->
		</ul>
		<!--:}  -->
        </div>
        <div class="slider-slide">
        <div class="sliver " style="text-align: center;">
			<p class="sliver-title" style="color: #444;">精彩直播</p>
			<small onclick="location.href='${root}zb/'" style="margin-right: 4px;">更多</small>
		</div>
            <!--:for(b in zbs!){  -->
                    <div class="slider-slide">
                        <img class="slide-banner" style="height: 150px;" src="${www}${b.img!}"/>
                        <div class="slide-title">
                            
                            <span class="nowrap slide-title-font" style="margin-right: 20px;">
                                ${b.title!}
                            </span>
                        </div>
                    </div>
                    <!--:}  -->
        </div>
        
        <div class="slider-slide">
        	<ul class="list">
            <!--:for(t in teachers!){  -->
    			<li class="list-li underline">
                    <div class="list-thumbnail">
                        <img data-load-src="" src="${www}${t.img!}" data-error-src="images/list-default.png">
                        
                    </div>
                    <div class="list-container">
                        <div class="list-title">
                            ${t.name!}
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-user color-primary"></i>
                            <p class="list-font">
                               	(${t.course_num!1})课程
                            </p>
                        </div>
                        <div class="list-row">
                            <i class="list-icon icon-computer color-primary"></i>
                            <p class="list-font">${t.text!}</p>
                        </div>
                    </div>
                </li>
    			<!--:}  -->
    			</ul>
        </div>
        </div>
        </div>
    </article>
    <script src="${root}js/seedsui.min.js"></script>
    
    <script type="text/javascript">

        /*兼容Ios浏览器滚动到最底或者最顶，不能滑动的问题*/
        /*[].slice.call(slides).forEach(function(n,i,a){
            n.addEventListener("scroll",function(e){
                compatibleIosScroll(e);
            },false);
        })
        function compatibleIosScroll(e){
            var container=e.target;
            var clientHeight=container.clientHeight; 
            var scrollTop=container.scrollTop; 
            var scrollHeight=container.scrollHeight;
            if(scrollTop==0){
                container.scrollTop=1;
                return;
            }
            if (clientHeight+scrollTop>=scrollHeight){
                container.scrollTop=container.scrollTop-1;
            }
        }*/
        var view={
            /*=========================
              Model
              ===========================*/
            initialize:function(){
                this.render();//使用backbone时，此行无用
            },
            render:function(){
                var self = this;
                //渲染页面
                this.slides=document.querySelectorAll("#ID-Pages > .slider-wrapper > .slider-slide");
                this.sliderContainer=document.getElementById("ID-Pages");
                this.sliderContainer.style.height=(window.innerHeight-84)+"px";

                this.tabbarContainer=document.getElementById("ID-Tabbar");
                this.tabs=this.tabbarContainer.querySelectorAll(".tab");

                this.slider=new Slider("#ID-Pages",{
                    onSlideChangeEnd:function(e){
                        self._tabActive(e.activeIndex);
                    }
                });

                //加载数据
                this.loadData();
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            loadData:function(){
                var self=this;
                this._attach();//使用backbone时，此行无用
            },
            /*=========================
              Method
              ===========================*/
            _eachBreak:function(arr,fn){
                for(var i=0;i<arr.length;i++){
                    if(fn(arr[i],i)==false)break;
                }
            },
            _tabActive:function(index){
                for(var i=0,t;t=this.tabs[i++];){
                    t.classList.remove("active");
                }
                this.tabs[index].classList.add("active");
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                for(var i=0,t;t=this.tabs[i++];){
                    t.addEventListener("click",function(e){
                        self._onClickTab(e);
                    },false);
                }
            },
            /*=========================
              Event Handler
              ===========================*/
            _onClickTab:function(e){
                var index=0;
                this._eachBreak(this.tabs,function(n,i){
                    if(n==e.target){
                        index=i;
                        return false;
                    }
                });
                this._tabActive(index);
                this.slider.slideTo(index);
            }
        }

        window.addEventListener("load",function(){
            view.initialize();
        }, false);
        
        function back(){history.go(-1);}
    </script>
</body>
</html>
